//   本金放款台账：LendingAccount

import React, { useState } from 'react'
import 'antd/dist/antd.css'
import './index.scss'

import { Select, Form, Input, DatePicker, Space, Button, Table, Modal } from 'antd'


// 表格数据列表对象
const data = []
for (let i = 0; i <= 46; i++) {
    data.push({
        key: i,
        loan_no: '100001',
        borrower: '张飞',
        loan_items: '工薪贷',
        term: '3个月 先息后本',
        loan_amount: '50,000.00',
        lending_time: '2018-02-15 12:12:25',
        lending_method: '委托放款',
        reconciliation_personnel: 'admin',
        reconciliation_date: '2021-02-15 12:12:25',
        reconciliation_status: '未对账',
    })
}

const columns = [
    // {
        // title: '全选',
        // dataIndex: 'all',
        // key: 'all',
        // align: 'center',
    // },
    {
        title: '借款编号',
        dataIndex: 'loan_no',
        key: 'loan_no',
        align: 'center',
    },
    {
        title: '借款人',
        dataIndex: 'borrower',
        key: 'borrower',
        align: 'center',
    },
    {
        title: '借款项目',
        dataIndex: 'loan_items',
        key: 'loan_items',
        align: 'center',
    },
    {
        title: '期限',
        dataIndex: 'term',
        key: 'term',
        align: 'center',
    },
    {
        title: '放款金额',
        dataIndex: 'loan_amount',
        key: 'loan_amount',
        align: 'center',
    },
    {
        title: '放款时间',
        dataIndex: 'lending_time',
        key: 'lending_time',
        align: 'center',
    },
    {
        title: '放款方式',
        dataIndex: 'lending_method',
        key: 'lending_method',
        align: 'center',
    },
    {
        title: '对账人员',
        dataIndex: 'reconciliation_personnel',
        key: 'reconciliation_personnel',
        align: 'center',
    },
    {
        title: '对账日期',
        dataIndex: 'reconciliation_date',
        key: 'reconciliation_date',
        align: 'center',
    },
    {
        title: '对账状态',
        dataIndex: 'reconciliation_status',
        key: 'reconciliation_status',
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'key',
        align: 'center',
        width: 200,
        render: text =>
            <div className="spans">
                <Button size="small" type='text'>查看详情</Button>
            </div>
    },

]

const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      name: record.name,
    }),
  };

export default function LendingAccount() {
    const [selectionType, setSelectionType] = useState('checkbox');
    const { RangePicker } = DatePicker
    const [stat, getState] = useState(false);
    const daoru = () => {
        getState(true)
    }
    const handleOk = () => {
        getState(false);
    };
    const handleCancel = () => {
        getState(false);
    };


    return (
        <div className='lendingAccount'>
            {/* 头部搜索及输入框 */}
            <div className="bank_head">
                <Form layout="inline">
                    <Form.Item>
                        <Input placeholder="借款人" />
                    </Form.Item><Form.Item>
                        <Input placeholder="借款编号" />
                    </Form.Item>
                    <Form.Item className='sta'>
                        <Select placeholder="对账状态">
                            <Select.Option value="demo">对方账号</Select.Option>
                            <Select.Option value="demo">借方账号</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item className='fangshi'>
                        <Select placeholder="放款方式">
                            <Select.Option value="demo">对方账号</Select.Option>
                            <Select.Option value="demo">借方账号</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item>
                        <Space direction="vertical" size={12}>
                            <RangePicker />
                        </Space>
                    </Form.Item>

                    <Form.Item className="chaxun">
                        <Button type="primary">查询</Button>
                    </Form.Item>
                </Form>
            </div>

            {/* 表格主体内容 */}
            <div className='bank_body'>
                {/* 表格头 */}
                <div className="bank_body_head">
                    <p className="text">数据列表</p>
                    <div className="body_head_right">
                        <Button type="primary" onClick={daoru}>批量对账确认</Button>
                        <Button>导出</Button>
                    </div>
                </div>
                {/* 表格主体 */}
                <Table rowSelection={{type:selectionType,...rowSelection}} bordered columns={columns} dataSource={data} />
            </div>
        </div>
    )
}
